<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .adpa{
            position: relative;
           width: 700px;
           height: 500px;
        }
        /* ul li{
            float: left;
            list-style-type: none;
            list-style-position: inside;
            padding: 20px; 
            position: absolute;
            top: 100px;

        } */
        .ab1{
            position: absolute;
            top: 100px;
        }
       .ab2{
           top: 100px;
           left: 200px;
        }
        .ab3{
            top: 100px;
            left: 400px;
           
        }
     
        img{
            width: 150px;
            height: 150px;
        }
        /* .clr{
          clear: both;
        } */
        /* ul::after{
            content: "";
            display: table;
            clear: both;
        } */
        .clearfix::after{
            content: "";
            display: table;
            clear: both;
            /* z-index: 2;
            position: fixed; */
        }
        /* .a{
            width: 100%;
            height: auto;
        } */
        .a{
            position: absolute;
            top: 50px;
            left: 50px;

        }
        .b{
            position: absolute;
            top: 100px;
            left: 100px;
            z-index: 1;
        }  
        .c{
            position: absolute;
            top: 150px;
            left: 150px;
        }
      

    </style>
</head>
<body>
   <!-- <ul class="clearfix">
     -->
   <!-- <ul>
        <li class=""><img src="../duck.jpg" alt=""></li>
        <li><img src="../duck.jpg" alt=""></li>
        <li><img src="../duck.jpg" alt=""></li>
        <li><img src="../duck.jpg" alt=""></li>
        <li><img src="../duck.jpg" alt=""></li>
    </ul> -->
    <div class="abpa" style="border: 1px red solid;">
        <div class="ab1"><img src="../duck.jpg" alt=""></div>
        <div class="ab2"><img src="../duck.jpg" alt=""></div>
        <div class="ab3"><img src="../duck.jpg" alt=""></div>
    </div>

    <!-- <img class="a" src="../SeanXiao.png" alt="">
    <img class="b" src="../duck.jpg" alt="">
    <img class="c" src="../flower.jpg" alt=""> -->
    <!-- <img class="d" src="../image.png" alt=""> -->
</body>
</html>